<template>
  <div class="edit-detail">
    <el-row class="name">
      <div class="name-title">项目名称：</div>
      <el-input v-model="info.game_name" placeholder="请输入项目名称" class="name-input" />
    </el-row>
    <el-row class="name">
      <div class="name-title">特点：</div>
      <el-input v-model="info.peculiarity" type="textarea" placeholder="请输入特点" class="name-input" />
    </el-row>
    <el-row class="name">
      <div class="name-title">封面图片：</div>
      <cover :cover="info.cover_pic" :ratio="ratio" @cover="handleCoverChange" />
    </el-row>
    <el-row class="name">
      <div class="name-title">轮播图片：</div>
      <carousel :carousel="info.other_pics" :ratio="ratios" @carousel="handleChangeCarousel" />
    </el-row>
    <el-row class="name">
      <div class="name-title">简介：</div>
      <div class="tinymce">
        <tinymce ref="editor" v-model="info.introduct" :height="300" />
      </div>
    </el-row>
    <!-- <el-row class="name">
      <div class="name-title">规则：</div>
      <div class="tinymce">
        <tinymce ref="editor" v-model="info.limit_rule" :height="300" />
      </div>
    </el-row>
    <el-row class="name">
      <div class="name-title">开放时间：</div>
      <div class="opentime">
        <textarea v-model="info.open_time" placeholder="请输入时间" />
      </div>
    </el-row> -->
    <el-row class="name">
      <el-button type="primary" class="button-submit" @click="handleSubmit">新增</el-button>
    </el-row>
  </div>
</template>
<script>
import Tinymce from '@/components/Tinymce'
import Carousel from '@/components/carousel'
import Cover from '@/components/cover'
import { add } from '@/api/project'
export default {
  name: 'ScenicAdd',
  components: {
    Tinymce,
    Carousel,
    Cover
  },
  data() {
    return {
      info: {
        game_name: '',
        cover_pic: '',
        other_pics: [],
        introduct: '',
        limit_rule: '',
        open_time: '',
        peculiarity: ''
      },
      ratios: '1080*605',
      ratio: '305*230'
      // base: 'https://dev.lyk.zyuu.cn'
    }
  },
  methods: {
    // 改变封面
    handleCoverChange(pic) {
      this.info.cover_pic = pic
    },
    // 改变轮播
    handleChangeCarousel(pics) {
      this.info.other_pics = pics
    },
    // 提交
    async handleSubmit() {
      const flag = this.validity()
      if (!flag) return
      const infos = Object.assign({}, { ...this.info })
      infos.other_pics = infos.other_pics.join('|')
      await add({ ...infos })
      this.$message.success({
        message: '提交成功',
        duration: 1000
      })
      setTimeout(() => {
        this.$router.push({
          path: '/system/scenic',
          query: {
            prop: 'refresh'
          }
        })
      }, 1000)
    },
    validity() {
      const { info } = this
      if (info.game_name.trim() === '') {
        this.$message.warning({
          message: '景区名称不能为空',
          duration: 1000
        })
        return false
      }
      if (!info.cover_pic.length) {
        this.$message.warning({
          message: '封面照面不能为空',
          duration: 1000
        })
        return false
      }
      if (!info.other_pics.length) {
        this.$message.warning({
          message: '轮播图不能为空',
          duration: 1000
        })
        return false
      }
      if (info.introduct.trim() === '') {
        this.$message.warning({
          message: '介绍不能为空',
          duration: 1000
        })
        return false
      }
      // if (info.limit_rule.trim() === '') {
      //   this.$message.warning({
      //     message: '规则不能为空',
      //     duration: 1000
      //   })
      //   return false
      // }
      // if (info.open_time.trim() === '') {
      //   this.$message.warning({
      //     message: '规则不能为空',
      //     duration: 1000
      //   })
      //   return false
      // }
      return true
    }
  }
}
</script>
<style lang="scss" scoped>
.edit-detail{
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 10px;
  z-index: 1500;
  padding: 20px;
  padding-top: 0;
  box-sizing: border-box;
  background-color: #fff;
  overflow-y: scroll;
  .name{
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .name-title{
      width: 100px;
      max-width: 120px;
    }
    .name-input{
      width: 400px;
    }
  }
  .tinymce{
    width: 80%;
  }
  .button-submit{
    margin-left: 100px;
    width: 120px;
  }
  .opentime{
    width: 100%;
  }
  .opentime textarea{
    margin-left: 10px;
    width: 80%;
    line-height: 30px;
    font-size: 14px;
    padding: 20px;
    box-sizing: border-box;
    resize: none;
    height: 300px;
    max-height: 300px;
    outline: none;
    border-radius: 6px;
  }
}
</style>
